<div id="notice_manage">
    <div class="notice_manage">
        <el-row class="table_search">
            <el-col :span="24">
                <template>
                    <el-select v-model="parameters.status" placeholder="全部状态">
                        <el-option
                                v-for="item in lists"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>

                    <el-button type="primary" @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
                </template>
            </el-col>
        </el-row>

        <el-row class="table_btn noticeBox">
            <el-col :span="24" class="text-r">
                <el-button type="primary" icon="el-icon-plus" @click="addNotice" class="addUsrtBtn">新增通知</el-button>
            </el-col>
        </el-row>

        <template>
            <el-table
                    size="mini"
                    :data="tableData"
                    style="width: 100%;cursor: pointer;"
                    @row-click='handleRowHandle'
                    class="noticeTable">
                <el-table-column
                        align="center"
                        prop="notifySeq"
                        label="通知编号"
                        width="200">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="notifyType"
                        label="通知类型"
                        width="200">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="200"
                        prop="status"
                        label="通知状态">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="200"
                        prop="createDate"
                        :formatter="formatterTime"
                        label="创建时间">
                </el-table-column>

                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                v-if="scope.row.status == '正常'?true:false"
                                size="mini"
                                @click="retract(scope.$index, scope.row,$event)"
                                class="btn-Del">
                            撤回
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <div class="block footerBox">
                <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :current-page.sync="currentPage"
                        :total="totalCount">
                </el-pagination>
            </div>
        </template>
    </div>
    <!--新增通知弹窗-->
    <el-dialog title="新增通知" :visible.sync="dialogFormVisible" :before-close="emptyContent">
        <el-form
                class="add-template-form"
                :rules="rules"
                ref="form"
                :model="form"
                label-width="140px"
                :label-position="labelPosition">

            <el-form-item label="选择机构：" prop="name" :label-width="formLabelWidth">
                <el-input style="width: 60%;"  readonly onclick="showMenu();" id="citySel" v-model="form.name" placeholder="请选择机构"></el-input>
                <div id="menuContent" class="menuContent" style="display:none; position: absolute;z-index: 1000;overflow: auto;width:60%;">
                    <ul id="treeDemo123" class="ztree" style="margin-top:0;"></ul>
                </div>
            </el-form-item>
            <el-form-item label="通知：" prop="desc" :label-width="formLabelWidth">
                <el-input  style="width: 60%;" type="textarea" v-model="form.desc"></el-input>
            </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="caleForm('form')">取 消</el-button>
            <el-button type="primary" @click="goConfirm('form')">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="通知详情" :visible.sync="dialogInfoVisible" class="dialogDetails">
        <div class="info-template-content">
            <el-row class="item-row">
                <el-col :span="5" style="color: #666">状态：</el-col>
                <el-col v-if="noticeInfo.status == '正常'" :span="19" style="color: #409EFF;">{{noticeInfo.status}}</el-col>
                <el-col v-else :span="19" style="color: #ff4444;">{{noticeInfo.status}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="5" style="color: #666">类型：</el-col>
                <el-col :span="19"style="color: #333">{{noticeInfo.notifyType}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="5" style="color: #666;">通知内容：</el-col>
                <el-col
                        :span="19"
                        style="color: #333;">
                    {{noticeInfo.notifyContext}}
                </el-col>
            </el-row>
        </div>
    </el-dialog>
</div>
<!--[if IE]>
<script>
   goIEPage(IEVersion(),'${basePath}/noticeIE9');
</script>
<![endif]-->
<script>
   var setting = {
       check: {
           enable: true
       },
       data: {
           simpleData: {
               enable: true
           }
       },
       callback: {
           beforeClick: beforeClick,
           onCheck: onCheck
       }
   };
   var zNodes = [];
   function beforeClick(treeId, treeNode) {
       var zTree = $.fn.zTree.getZTreeObj("treeDemo123");
       zTree.checkNode(treeNode, !treeNode.checked, null, true);
       return false;
   }

   function onCheck(e, treeId, treeNode) {
       var zTree = $.fn.zTree.getZTreeObj("treeDemo123"),
               nodes = zTree.getCheckedNodes(true),
               checkArr = '',
               v = "";


       for (var i=0, l=nodes.length; i<l; i++) {
           v += nodes[i].name + ",";
           if(!nodes[i].isParent){
               checkArr +=  nodes[i].id +  ',';
               //checkArr.push(nodes[i].id);
           }
       }


       if (v.length > 0 ) v = v.substring(0, v.length-1);
       if (checkArr.length > 0 ) checkArr = checkArr.substring(0, checkArr.length-1);

       notice_manage.form.name = v;
       notice_manage.form.selectId = checkArr;

   }

   function showMenu() {
       var cityObj = $("#citySel");
       var cityOffset = $("#citySel").offset();
       console.log(cityObj)
       $("#menuContent").slideDown("fast");

       $.post("${basePath}merchant/dept/togetDeptTree", function (json) {
           notice_manage.treeArr = '';
           notice_manage.treeArr = json.t;
           var treeObj = $.fn.zTree.init($("#treeDemo123"), setting, json.t);
           //默认展开所有节点
           //treeObj.expandAll(true);
       });
       //$.fn.zTree.init($("#treeDemo123"), setting, zNodes);
       $("body").bind("mousedown", onBodyDown);
   }
   function hideMenu() {
       $("#menuContent").fadeOut("fast");
       $("body").unbind("mousedown", onBodyDown);
   }
   function onBodyDown(event) {
       if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
           hideMenu();
       }
   }

   var notice_manage =
           new Vue({
               el: "#notice_manage",

               data: {
                   treeArr: '',
                   labelPosition: 'left',
                   dialogFormVisible: false,
                   dialogInfoVisible: false,
                   noticeInfo: {},
                   form: {
                       desc: '',
                       name: '',
                       selectId: ''
                   },
                   rules: {
                       desc: [
                           { required: true, message: '请填写通知内容', trigger: 'blur' },
                           { max: 600, message: '长度在 600 个字符以内', trigger: 'blur' }
                       ],
                       name: [
                           { required: true, message: '请选择末级机构', trigger: 'blur' }
                       ]
                   },
                   formLabelWidth: '120px',
                   /*1-正常 0-撤回 2-草稿*/
                   lists: [
                       {
                           value: '',
                           label: '全部状态'
                       }
                       ,
                       {
                           value: '1',
                           label: '正常'
                       },
                       {
                           value: '0',
                           label: '撤回'
                       }
                   ],
                   value: '',
                   tableData: [],
                   totalCount:'',
                   totalPage:'',
                   parameters:{
                             'status':'',
                             'currentPage':''
                   },
                   currentPage: 1,
               },
               methods: {
                   // 关闭前清空内容before-close
                   emptyContent:function(){
                       notice_manage.dialogFormVisible = false;
                       notice_manage.$refs.form.resetFields();
                   },
                   // 时间转换
                   formatterTime: function (row) {
                        return new Date(row.createDate).Format('yyyy-MM-dd   hh:mm:ss');
                   },
                   //新增通知
                   addNotice: function () {
                       notice_manage.dialogFormVisible = true;
                   },
                   //弹窗取消
                   caleForm: function (formName) {
                       notice_manage.dialogFormVisible = false;
                       notice_manage.$refs[formName].resetFields();
                   },
                   // 新增提交功能
                   goConfirm: function (formName) {
                       if(this.treeArr){
                           if(this.treeArr.length < 2){
                               this.$message({
                                   type: 'warning',
                                   message: '请先添加机构'
                               });
                               return
                           }
                       }
                       notice_manage.$refs[formName].validate(
                               function(valid) {
                                   if (valid) {
                                       notice_manage.dialogFormVisible = false;
                                       var options= {
                                           notifyContext: notice_manage.form.desc,
                                           treeDemos: notice_manage.form.selectId
                                       };
                                       sendService('${basePath}merchant/notify/insertNotify', options, function (resData) {
                                           if(resData.status == 'success'){
                                               notice_manage.$message({
                                                   type: 'success',
                                                   message: resData.msg});
                                              // notice_manage.$refs[formName].resetFields();
                                           reloadPage('${basePath}/merchant/notify/getNotifyList');

                                           }else {
                                               notice_manage.$message.error(resData.msg);
                                           }
                                       })
                                   } else {
                                       return false;
                                   }
                               });
                   },
                   // 分页加载数据
                   handleCurrentChange: function(currentPage){
                       Pagesearch(this,'${basePath}merchant/notify/findMerchantNotifyList', this.parameters,currentPage,
                        function (resData) {
                            if(resData.status == 'success'){
                                resData.t.forEach(function (item) {
                                    /*1-正常 0-撤回 2-草稿*/
                                    if(item.status == '1'){
                                        item.status = '正常'
                                    } else if(item.status == '0'){
                                        item.status = '撤回'
                                    } else if(item.status == '2'){
                                        item.status = '草稿'
                                    }
                                    if(item.notifyType == '04'){
                                        item.notifyType = '系统通知'
                                    }
//                                     if(item.notifyType == '0001'){
//                                         item.notifyType = '普通通知'
//                                     } else if(item.notifyType == '0002'){
//                                         item.notifyType = '签约通知'
//                                     } else if(item.notifyType == '0003'){
//                                         item.notifyType = '缴费通知'
//                                     }
                                });
                            }
                        });
                   },
                   // 搜索
                   searchFun:  function () {
                       Pagesearch(this,'${basePath}merchant/notify/findMerchantNotifyList', this.parameters,1,
                               function (resData) {
                                   if(resData.status == 'success'){
                                       /*1-正常 0-撤回 2-草稿*/
                                       resData.t.forEach(function (item) {
                                           if(item.status == '1'){
                                               item.status = '正常'
                                           } else if(item.status == '0'){
                                               item.status = '撤回'
                                           } else if(item.status == '2'){
                                               item.status = '草稿'
                                           }
                                           if(item.notifyType == '04'){
                                               item.notifyType = '系统通知'
                                           }
//                                            if(item.notifyType == '0001'){
//                                                item.notifyType = '普通通知'
//                                            } else if(item.notifyType == '0002'){
//                                                item.notifyType = '签约通知'
//                                            } else if(item.notifyType == '0003'){
//                                                item.notifyType = '缴费通知'
//                                            }
                                       });
                                   }
                               });
                   } ,
                   // 撤回
                   retract: function (index, row,e) {
                       stopMaoPao();

                       if(row.status == '正常'){
                           notice_manage.$confirm('此操作将永久撤回该通知，是否继续','提示', {
                               confirmButtonText: '确定',
                               cancelButtonText: '取消',
                               type: 'warning'
                           }).then(function () {
                               //后台撤回方法
                               var options= {notifySeq: row.notifySeq};
                               sendService('${basePath}/merchant/notify/withdrawNotify', options, function (resData) {
                                   if(resData.status == 'success'){
                                       row.status = '撤回';
                                       notice_manage.$message({
                                           type: 'success',
                                           message: resData.msg
                                       });

                                   }
                               })

                           }).catch(function () {
                               notice_manage.$message({
                                   type: 'info',
                                   message: '已取消删除'
                               });
                           })
                       }
                   },
                   // 详情
                   handleRowHandle: function (row) {
                       notice_manage.dialogInfoVisible = true;
                       notice_manage.noticeInfo = row;
                       console.log(notice_manage.noticeInfo);
                   }
               },
               created: function () {
                   Pagesearch(this,'${basePath}merchant/notify/findMerchantNotifyList', null,1,
                           function (resData) {
                               if(resData.status == 'success'){
                                   resData.t.forEach(function (item) {
                                       /*1-正常 0-撤回 2-草稿*/
                                       if(item.status == '1'){
                                           item.status = '正常'
                                       } else if(item.status == '0'){
                                           item.status = '撤回'
                                       } else if(item.status == '2'){
                                           item.status = '草稿'
                                       }
                                       if(item.notifyType == '04'){
                                           item.notifyType = '系统通知'
                                       }
//                                        01：银行端管理人员 02：银行端柜员 03：缴费单位管理人员 04：缴费单位缴费用户';
//                                        if(item.notifyType == '01'){
//                                            item.notifyType = '银行端管理里人员'
//                                        } else if(item.notifyType == '02'){
//                                            item.notifyType = '银行端柜员'
//                                        } else if(item.notifyType == '03'){
//                                            item.notifyType = '缴费单位管理人员'
//                                        } else if(item.notifyType == '04'){
//                                            item.notifyType = '缴费单位缴费用户'
//                                        }
                                   });
                               }
                           });
               }
           });
</script>

<style scoped>
   .el-table tr{
       height: 40px;
   }
   .addUsrtBtn{
       padding: 9px 15px;
       font-size: 12px;
   }
   .el-table::before{
       height: 0;
   }

   #jgTree{
       position: absolute;
       z-index: 999;
       left: 40px;
       width: 210px;
       background: #fff;
       display: none;
   }

   #menuContent{
       background-color: #fff;
       border: 1px solid #fff;
   }


   .table_search, .table_btn{
       height: 60px;
       margin-bottom: 10px;
       background: #fff;
       padding: 10px 20px 30px;
   }
   .el-input{
       width: auto;
   }
   .noticeBox{
       margin-bottom: 0;
       border-bottom: 1px solid #f2f4f8;
   }
   .text-r{
       text-align: left;
   }
   .footerBox {
       width: 100%;
       height: 50px;
       background-color: #fff;
        -webkit-box-sizing: border-box;
       box-sizing: border-box;
       padding-top: 9px;
       text-align: right;
   }
   /*详情样式*/
   .el-dialog__body{
       padding: 40px 0 40px 100px;
   }
   .el-dialog__header span {
       padding-left: 20px;
   }
   .el-dialog__headerbtn .el-dialog__close {
       color: #aaa;
       font-size: 22px;
   }
   .dialogDetails .el-dialog {
       overflow: hidden;
       -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.5);
       -moz-box-shadow: 0 0 16px rgba(0,0,0,0.5);
       box-shadow: 0 0 16px rgba(0,0,0,0.5);
   }
   .el-dialog__header {
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
       border-bottom: 1px solid rgba(255,68,68,1);
       width: 100%;
       position: absolute;
       left: 0px;
       top: 0px;
       background-color: #fff;
   }
   .el-dialog__body {
       padding-top: 75px;
   }
   .dialogDetails .el-dialog__body {
       padding: 50px 0 0 0;
   }
   .dialogDetails .info-template-content .el-row:nth-child(even) {
       background-color: #f8f9fb;
   }
   .dialogDetails .item-row {
       height: 46px;
       line-height: 46px;
       font-size: 16px;
       padding-left: 60px;
   }
   .dialogDetails .item-row div:first-of-type {
       color: #666;
       text-align: left;
   }
   .dialogDetails .item-row div:last-of-type {
       color: #333;
       padding-right: 10px;
   }
   .dialogDetails .info-template-content .el-row:last-of-type {
       margin-bottom: 30px;
   }
</style>
